<template>
	<view class="user-manage">
		<view class="search-top">
			<view class="input-search">
				<input type="text" placeholder="请输入代扣人员昵称" v-model="keywords" />
				<image src="../../static/images/home/切片@2x.png"></image>
			</view>
			<view class="add-btn" @click="addLoan()">
				<image src="../../static/images/user/编组 3备份 3@2x.png" mode=""></image>
				
			</view>
		</view>
		<view class="list-box">
			
			<view class="device-list-box" v-if="datalist.length > 0">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">
							YD9080898wew7
						</view>
						<view class="item-top-right">
							分成：10.0%
						</view>
					</view>
					<view class="deviceContent">
						<image src="../../static/images/home/332325341备份 3@2x.png"></image>
						<view class="item-info">
							<view class="t0">代理编号：D23232321248374</view>
							<view class="t1">手机号码：19888887778</view>
							<view class="t2">注册时间：2034-08-23 12:3</view>
						</view>
					</view>
				</view>
			</view>
		    <view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData:['代理商','商家'],
				keywords:'',
				datalist: [
					{
						code: '08987',
						power: '24353',
						deviceStatus: '空闲',
						powerStatus: '0',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					},
					{
						code: '08987',
						power: '9453',
						deviceStatus: '空闲',
						powerStatus: '1',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					},
					{
						code: '08987',
						power: '24353',
						deviceStatus: '空闲',
						powerStatus: '0',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					},
					{
						code: '08987',
						power: '24353',
						deviceStatus: '空闲',
						powerStatus: '0',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					},
					{
						code: '08987',
						power: '24353',
						deviceStatus: '空闲',
						powerStatus: '0',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					},
					{
						code: '08987',
						power: '24353',
						deviceStatus: '空闲',
						powerStatus: '0',
						store: '大赤心悦城店',
						id: 1,
						name: '提现',
						date: '2021.01.02 12:34',
						status: '启用',
						daili: '自营'
					}
				],
				
			}
		},
		onLoad() {
		},
		methods: {
			addLoan(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-manage{
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 348rpx;
		padding-bottom: 100rpx;
		padding: 14px;
		.search-top{
		 	   display: flex;
		 	   .input-search {
		 			position: relative;
		 			flex: 1;
		 			uni-input {
		 				background: #ffffff;
		 				box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
		 				border-radius: 24rpx;
		 				font-family: PingFangSC, PingFang SC;
		 				font-weight: 400;
		 				font-size: 28rpx;
		 				color: #7d8592;
		 				padding: 24rpx 40rpx;
		 				font-style: normal;
		 			}
		 			uni-image {
		 				width: 48rpx;
		 				height: 48rpx;
		 				position: absolute;
		 				right: 24rpx;
		 				top: 20rpx;
		 			}
		 	   }
		 	   .add-btn{
		 		   width: 88rpx;
		 		   height: 88rpx;
		 		   background: #FFFFFF;
		 		   box-shadow: 0px 6px 58px 0px rgba(196,203,214,0.1);
		 		   border-radius: 12px;
		 		   margin-left:20rpx;
		 		   display: flex;
		 		   align-items: center;
		 		   justify-content: center;
		 		   uni-image{
		 			   width: 17px;
		 			   height: 17px;
		 		   }
		 		   uni-text{
		 			   font-family: PingFangSC, PingFang SC;
		 			   font-weight: 500;
		 			   font-size: 32rpx;
		 			   color: #49A1FD;
		 			   line-height: 44rpx;
		 			   text-align: right;
		 			   font-style: normal;
		 		   }
		 	   }
		 }
		
		.list-box{
			margin: 20rpx 10rpx;
			.device-list-box {
				.device-list-item {
					background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
					background-size: 100% 100%;
					padding: 20px 14px;
					border-radius: 14px;
					position: relative;
					margin: 0 -10px 10px;
					.item-top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.item-top-left {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
							
						}
						.item-top-right {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #F95452;
							line-height: 40rpx;
						}
					}
					.deviceContent {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
						uni-image {
							width: 120rpx;
							height: 120rpx;
							margin-right: 16rpx;
						}
						.item-info {
							.t0 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #413100;
								line-height: 40rpx;
								font-style: normal;
							}
							.t1 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								font-style: normal;
							}
							.t2 {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								line-height: 34rpx;
								font-style: normal;
							}
						}
					}
					.deviceBottom {
						border-bottom: 1px solid rgba(73, 161, 253, 0.2);
						padding-bottom: 16rpx;
						padding-top: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.bottom-left {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}
						.bottom-right {
							display: flex;
							align-items: center;
							justify-content: center;
							background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
							box-shadow: 0px 2px 6px 0px rgba(20, 135, 255, 0.4);
							border-radius: 22px;
							padding: 4rpx 16rpx;
				
							uni-image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 6rpx;
							}
							uni-text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 26rpx;
								color: #ffffff;
								line-height: 36rpx;
								font-style: normal;
							}
						}
					}
				
					.btns {
						display: flex;
						justify-content: end;
						margin-top: 20rpx;
						uni-button {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #ffffff;
							line-height: 40rpx;
							font-style: normal;
							padding: 8rpx;
							border-radius: 4px;
							margin: 0 0 0 20rpx;
							&.btn-blue {
								background: #49a1fd;
							}
							&.btn-green {
								background: #25ab64;
							}
							&.btn-yellow {
								background: #ff950a;
							}
							&.btn-red {
								background: #f95452;
							}
						}
					}
				}
			}
			.empty-box {
				margin: 0 -10px;
				text-align: center;
				background: url('../../static/images/home/empty-bg.png') no-repeat;
				padding: 200rpx 0 160rpx;
				background-size: 100% 100%;
				uni-image {
					width: 400rpx;
					height: 340rpx;
				}
				uni-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #a7a5a5;
					line-height: 20px;
					font-style: normal;
					margin-top: 50rpx;
					display: block;
				}
			}
			 
		}
		
	}
   
</style>